import React from 'react';
import './index.css';
import DivChecked from "../../../Component/DivChecked";
import { Input,DatePicker,Button } from 'antd';
import UpCamera from '../../../Component/UpCamera';
import Authentication from '../../../Server/Authentication';
import UserCheck from '../../../utils/UserCheck';

export default class Certificate_type extends React.Component{
    constructor(props){
        super();
        this.state={
            isAOPA:true,
            isUTC:false,
            isASFC:false,
            type:"AOPA认证",
            name:"",
            startDate:"",
            endDate:"",
            frontImg:"",
            endImg:""
        }
    }
    SelectAOPA(){
        this.setState({
            isAOPA:true,
            isUTC:false,
            isASFC:false,
            type:"AOPA认证",
        },()=>{});
    }
    SelectUTC(){
        this.setState({
            isAOPA:false,
            isUTC:true,
            isASFC:false,
            type:"UTC认证"
        },()=>{});
    }
    SelectASFC(){
        this.setState({
            isAOPA:false,
            isUTC:false,
            isASFC:true,
            type:"ASFC认证"
        },()=>{});
    }
    //开始时间
    StartChange(date){
        let dateStr=date._d.toLocaleDateString();
        dateStr=dateStr.replace(/\//g,'-');
        this.setState({
            startDate:dateStr,
        });
    }
    //结束时间
    EndChange(date){
        let dateStr=date._d.toLocaleDateString();
        dateStr=dateStr.replace(/\//g,'-');
        this.setState({
            endDate:dateStr,
        });
    }
    setErr(err){
        this.setState({
            err:err
        })
    }
    clearErr(){
        this.setState({
            err:""
        })
    }
    //继续添加
    AddMore(){
        this.clearErr();
        this.setState({
            name:"",
            frontImg:"",
            endImg:""
        });
    }
    Save(){
        Authentication.AddCertificate(UserCheck.GetUserID(),
        this.state.type,this.state.name,this.state.startDate+'-'+this.state.endDate,
        this.state.frontImg,this.state.endImg)
        .then(response=>{
            this.setErr("添加成功");
            console.log(response);
        },reject=>{
            // console.log(reject);
        })
        // console.log("save");
    } 
    //正面照片
    FrontData(data){
        this.setState({
            frontImg:data.originFileObj
        })
        console.log(data)
    }
    //背面照片
    EndData(data){
        this.setState({
            endImg:data.originFileObj
        })
        console.log(data)
    }
    render(){
        let labels=(
            <div className="Certificate_Type_M">
                <DivChecked key={0} Change={e=>this.SelectAOPA(e)} DivActive={this.state.isAOPA} title="AOPA认证"/>
                <DivChecked key={1}  Change={e=>this.SelectUTC(e)} DivActive={this.state.isUTC} title="UTC认证"/>
                <DivChecked key={2}  Change={e=>this.SelectASFC(e)} DivActive={this.state.isASFC} title="ASFC认证"/>
            </div>
        );
       
        return(
            <div className="Certificate_Type_Out">
                <div className="Certificate_Type_Top">
                    <img alt="" src="./assets/CA/ct_1.png" className="Certificate_Type_Top_Img" />
                    <div className="Certificate_Type_Top_Title">证书类型</div>
                </div>
                {labels}
                <div className="Certificate_Type_MA">
                    <span className="Certificate_Type_MA_Title">证书编号</span>
                    <div className="Certificate_Type_MA_Body">
                        <Input placeholder="请输入证书编号" value={this.state.name} onChange={e=>this.setState({name:e.target.value})}/>
                    </div>
                </div>
                <div className="Certificate_Type_MA">
                    <span className="Certificate_Type_MA_Title">保险有限期</span>
                    <div className="Certificate_Type_MA_Body">
                            <DatePicker style={{ width: '48%' }} onChange={e=>this.StartChange(e)}/>
                            <span className="Certificate_Type_MA_B">~</span>
                            <DatePicker style={{ width: '48%' }} onChange={e=>this.EndChange(e)}/>
                        </div>
                </div>
                <div className="Certificate_Type_Upload">
                    <div>
                        <UpCamera src={this.state.frontImg} Change={e=>this.FrontData(e)} title="点击上传证书正面" />
                    </div>
                    <div>
                        <UpCamera src={this.state.endImg} Change={e=>this.EndData(e)} title="点击上传证书背面" />
                    </div>
                </div>
                <div className="Certificate_Type_Remark">
                    <span>*</span>
                    <span>请将认证证书内容页拍照并上传（务必确保证书与本人实名认证信息相符）</span>
                </div>
                <div>
                    <font color="red">{this.state.err}</font>
                </div>
                <div className="Certificate_Type_Bottom">
                    <Button onClick={e=>this.AddMore(e)}>继续添加</Button>
                    <Button onClick={e=>this.Save(e)}>提交认证</Button>
                </div>
            </div>
        )
    }
}